<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% include ../partial/meta %>
    <link rel="stylesheet" href="/app/static/css/frozen.css">
    <link rel="stylesheet" href="/app/static/css/client.css">
    <link rel="stylesheet" href="/app/static/css/jq.css">
    <link rel="stylesheet" href="/app/static/css/datepicker.css">
    <style>
        .btn.ca-ok {
            display: none;
        }
        body.load .loading {
            display: block;
        }

        .loading {
            display: none;
            width: 72px;
            height: 72px;
            text-align: center;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -32px;
            margin-top: -32px;
            font-size: 12px;
            
        }
        .loading img {
            -webkit-animation: load .8s linear infinite;
            animation: load .8s linear infinite;
        }
        @keyframes load {
            0% {
                -webkit-transform: rotateZ(0);
                transform: rotateZ(0);
                transform-origin:50% 50%;
            }

            100% {
                -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
                transform-origin:50% 50%;
            }
        }

    </style>
</head>
<body>
    <header>
        <form enctype="multipart/form-data" method="post" name="fileinfo" class ="form-input">
            <div>
                <ul class="ui-row">
                    <li class="ui-col ui-col-20">小区</li>
                    <li class="ui-col ui-col-70">
                        <input type="text" placeholder="小区" name ="community" need>
                    </li>
                </ul>
                <ul class="ui-row">
                    <li class="ui-col ui-col-20">户型</li>
                    <li class="ui-col ui-col-70">
                        <input type="text" placeholder="户型" class="household" readonly>
                    </li>
                    <li class="ui-col ui-col-10 arrow"><img src="/app/static/img/regex-arrow.png" alt="arrow"></li>
                </ul>
                <ul class="ui-row">
                    <li class="ui-col ui-col-20">租金</li>
                    <li class="ui-col ui-col-70">
                        <input type= "tel" placeholder="租金" name ="rent" need>
                    </li>
                </ul>

                <!-- <ul class="ui-row">
                    <li class="ui-col ui-col-20">可入住时间</li>
                    <li class="ui-col ui-col-70">
                        <input type= "tel" placeholder="预租时间" name ="rentTime" need readonly>
                    </li>
                    <li class="ui-col ui-col-10 arrow"><img src="/app/static/img/regex-arrow.png" alt="arrow"></li>
                </ul> -->
            </div>
            <div class="form-file">
                <p>房源照片</p>
                <ul class="previewpicture" id="previewpicture">
                    <li id="previewpicture-add">
                    <div class="previewpicture-pic"></div>
                  </li>
                </ul>
            </div>
            <div class="form-file">
                <p>房源描述</p>
                <textarea name="comment"></textarea>
            </div>
            <div class="publish">发布</div>
            <p class="tel">
                客服热线<br>
                <a href="tel:0592-5931113">0592-5931113</a>
            </p>
        </form>
        <div class ="filter">
            <ul class="ui-row">
                <li class="ui-col ui-col-33 cancel" style="text-align: left">取消</li>
                <li class="ui-col ui-col-33">筛选</li>
                <li class="ui-col ui-col-33 ok" style="text-align: right">完成</li>
            </ul>
            <ul class="ui-row filter-line">
                <li class="ui-col ui-col-100" name ="roomNum" value ="1">一室</li>
                <li class="ui-col ui-col-100" name ="roomNum" value ="2">二室</li>
                <li class="ui-col ui-col-100" name ="roomNum" value ="3">三室</li>
                <li class="ui-col ui-col-100" name ="roomNum" value ="4">四室+</li>
            </ul>
            <ul class="ui-row filter-line">
                <li class="ui-col ui-col-100" name ="hallNum" value ="1">一厅</li>
                <li class="ui-col ui-col-100" name ="hallNum" value ="2">二厅</li>
                <li class="ui-col ui-col-100" name ="hallNum" value ="3">三厅+</li>
            </ul>
            <ul class="ui-row filter-line">
                <li class="ui-col ui-col-100" name ="toiletNum" value ="1">一卫</li>
                <li class="ui-col ui-col-100" name ="toiletNum" value ="2">二卫</li>
                <li class="ui-col ui-col-100" name ="toiletNum" value ="3">三卫+</li>
            </ul>
        </div>
    </header>
    <div class="loading">
        <img src="/app/static/img/load.png" alt="">
        <p>加载中...</p>
    </div>
    <script type="text/javascript" src ="/app/static/js/zepto.min.js"></script>
    <script type="text/javascript" src ="/app/static/js/previewpic.js"></script>
    <script type="text/javascript" src ="/app/static/js/datepicker.js"></script>
    <script src ="/app/static/js/customalert.js"></script>
    <script>

        function alert(str) {
            $.customalert({
                content: str
            })
        }

        PreviewPicture('#previewpicture-add', {
            addTrue: function (oInput, oFiles, oImage) { 
                
                var oBox = document.getElementById('previewpicture');
                var oLi = document.createElement('li');
                oLi.innerHTML = [
                    '<div class="previewpicture-pic" style="background-image:url(',
                    oImage.result,
                    ')"></div><div class="previewpicture-del" onclick="delFile(this)"></div>'
                ].join('');
                oLi.appendChild(oInput);
                oBox.insertBefore(oLi, document.getElementById('previewpicture-add'));
                
            },
            addFalse: function () { 
                alert('请重新选择图片');
                
            }
        });

        function delFile (_this) {
            oLi = _this.parentNode;
            oLi.parentNode.removeChild(oLi);
        }


        var dateInput = $('[name="rentTime"]');
        var datePicker = new window.DatePicker({
            confirmCbk: function(data) {
                dateInput.val( data.year + '-' + data.month + '-' + data.day )
            }
        });

        dateInput.on('click', function(e) {
            dateInput.blur();
            datePicker.open();
        }) 


        var household  = $('.household'),
            filter     = $('.filter'),
            check      = $('.ok'),
            need       = $('[need]'),
            body       = $('body'),
            cancel     = $('.cancel'),
            publish    = $('.publish'),
            filterItem = $('.filter-line li'),
            postData   = {roomNum: '', hallNum: '', toiletNum: ''},
            postMsg    = {roomNum: '须选择房间数', hallNum: '须选择大厅数', toiletNum: '须选择卫生间数'},
            tipMsg     = {community: '须填写小区', rent: '须填写租金', rentTime: '须填写预租时间'},
            temData    = {roomNum: '', hallNum: '', toiletNum: ''}

        function filterClass(bool) {
            
        }

        $('[readonly]').each(function() {
            $(this)[0].readOnly = true;
        })

        household.on('click', function(event) {
            filter.addClass('active')
        });
        check.on('click', function(event) {
            filter.removeClass('active')
            for(var key in temData) {
                postData[key] = temData[key]
            }   
            household.val(postData['roomNum'] + '室' + postData['hallNum'] +'厅' + postData['toiletNum'] + '卫')
        });
        cancel.on('click', function(event) {
            filter.removeClass('active')
        });
        filterItem.on('click', function(event) {
            var self        = $(this)
            var key         = self.attr('name')
            var value       = self.attr('value')
            var self        = $(this)
            temData[key]    = value

            self.parent('ul').find('li').removeClass('active')
            self.addClass('active')
        });

        publish.on('click', function(event) {
            var bool = false
            need.each(function() {
                if(!bool) {
                    var self = $(this)
                    var name = self.attr('name')
                    var value= self.val()
                    if('' == value) {
                        bool = true
                        alert(tipMsg[name])
                        setTimeout(function() {
                            body.removeClass('oncustomalert')
                        }, 1000)
                    } 
                }
            })

            if(!bool) {
                for(var key in postData) {
                    if('' == postData[key]) {
                        bool = true
                        alert(postMsg[key])
                        setTimeout(function() {
                            body.removeClass('oncustomalert')
                        }, 1000)
                        break
                    }
                }
            }

            if(!bool) {
                sendForm()
            }
        });
        (function() {
            Date.prototype.Format = function (fmt) { 
                var o = {
                    "M+": this.getMonth() + 1, 
                    "d+": this.getDate(), 
                    "h+": this.getHours(), 
                    "m+": this.getMinutes(), 
                    "s+": this.getSeconds(), 
                    "q+": Math.floor((this.getMonth() + 3) / 3), 
                    "S": this.getMilliseconds() 
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
        })()
        function sendForm() {

            $('body').addClass('load');
            var oData = new FormData(document.forms.namedItem("fileinfo"))
            for(var key in postData) {

                oData.append(key, postData[key]);
            }
            // add temp
            oData.append('rentTime', (new Date()).Format("yyyy-MM-dd"));
            var oReq = new XMLHttpRequest();
            oReq.open("POST", location.href, true);
            oReq.onload = function(oEvent) {
                $('body').removeClass('load');
                if (oReq.status == 200) {
                    
                    if(JSON.parse(oReq.response).code == 0) {

                        alert('发布成功！请耐心等待客服审核！')
                        setTimeout(function() {
                            body.removeClass('oncustomalert')
                        }, 1000)
                    } else {
                        alert(JSON.parse(oReq.response).msg)
                        setTimeout(function() {
                            body.removeClass('oncustomalert')
                        }, 1000)
                    }
                } else {
                    alert(oReq.statusText);
                    setTimeout(function() {
                        body.removeClass('oncustomalert')
                    }, 1000)
                }
            };

            oReq.send(oData);
        }

    </script>
</body>

</html>
